<template>
	<view class="distributionOrderHeader" :class="{ skelett: isSkelett }">
		<view class="distributionOrderHeader-header">
			<image :src="bgImage" />

			<view class="distributionOrderHeader-header-title">
				<view>
					<image :src="singleObject.icon" />
					<text>{{ singleObject.title }}</text>
				</view>
			</view>

			<view class="distributionOrderHeader-header-hint">
				<view>
					<text>{{ singleObject.hint }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';

const reviewIcon = Object.freeze(`${defaultImageUrl}icon/icon_xq_shz.png`);
const passIcon = Object.freeze(`${defaultImageUrl}icon/icon_dd_shwtg.png`);

const orderReview = Object.freeze([
	{
		type: 'audit',
		icon: reviewIcon,
		title: '审核中',
		hint: '工作人员将在1-3个工作日为您审核，请耐心等待～'
	},
	{
		type: 'pass',
		icon: passIcon,
		title: '审核未通过',
		hint: '视频上的抖音号与本人的账号不匹配'
	},
	{
		type: 'grouping',
		icon: passIcon,
		title: '拼团中',
		hint: '再邀请8人即可拼团成功'
	}
]);
const bgImage = Object.freeze(`${defaultImageUrl}image/img_bg_xq.png`);

export default {
	name: 'Distribution-OrderHeader',

	props: {
		type: {
			type: String
		},

		isSkelett: {
			type: Boolean,
			default: false
		},

		hintList: {
			type: Array,
			default: () => {
				return orderReview;
			}
		},
		errorMsg: {
			type: String,
			default: undefined
		}
	},

	data() {
		return {
			bgImage,

			isLoading: false
		};
	},

	computed: {
		singleObject() {
			const { type, hintList, errorMsg } = this;
			const single = hintList.find((item) => item.type === type) || {};
			if (errorMsg) {
				single.hint = errorMsg;
			}
			return single;
		}
	},

	methods: {}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.distributionOrderHeader {
	&-header {
		height: 312rpx;
		overflow: hidden;
		margin: 0 -20rpx;
		position: relative;
		background: linear-gradient(90deg, #5359ff 0%, #8266ff 70%);

		&-title {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;

			color: #fff;
			font-size: 40rpx;
			font-weight: bold;

			image {
				width: 56rpx;
				height: 56rpx;
				margin-right: 6rpx;
			}
		}

		&-hint {
			color: rgba(255, 255, 255, 0.8);
			font-size: 24rpx;
			text-align: center;
			margin-top: 18rpx;
		}

		> image {
			position: absolute;
			top: 0;
			right: 0;
			width: 272rpx;
			height: 284rpx;
		}
	}

	&.skelett {
		.distributionOrderHeader-header-hint,
		.distributionOrderHeader-header-title {
			view {
				display: inline-block;
				border-radius: 12rpx;
				background: $skelettBgColor;

				image,
				text {
					visibility: hidden;
				}
			}
		}
	}
}
</style>
